<template>
  <div class="hello">
    <h1>v-for的使用</h1>
    <div style="margin-left: 40%">
      <table>
        <thead>
        <td>用户名</td>
        <td>年龄</td>
        <td>性别</td>
        </thead>
        <tbody>
        <tr v-for="(user, index) in list" :key="index">
          <td>{{user.userName}}</td>
          <td>{{user.age}}</td>
          <td>{{user.sex}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <el-table size="mini" border style="width: 100% " height="550" :data="list">
      <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
      <el-table-column prop="age" label="年龄" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      list: [
        {
          'userName': 'user1',
          'age': 18,
          'sex': '男'
        },
        {
          'userName': 'user2',
          'age': 19,
          'sex': '女'
        },
        {
          'userName': 'user3',
          'age': 20,
          'sex': '女'
        }
      ]
    }
  }
}
</script>

<style scoped>
</style>
